<template>
  <div id="address">
    <el-divider content-position="left"><strong><ins>{{address_title}}</ins></strong></el-divider>
    <div class="address_box">
      <el-collapse v-model="activeNames" @change="handleChange" class="address_container">
        <el-collapse-item :name="val.a_id" v-for="val in address_Info" :key="val.a_id" v-if="val.a_state===0">
          <template slot="title">
            默认地址<i class="el-icon-s-flag color-red font-bold" ></i>
          </template>
          <div class="flex-layout justify-start align-center">
            <div class="width-per-40 text-left"><strong>联系人：</strong>{{val.a_user}}</div>
            <div class="width-per-40 text-left"><strong>联系电话：</strong>{{val.a_phone}}</div>
            <div class="border-box pad-10 text-right width-per-20">
              <el-button type="text" @click="typeJudgment(1, val.a_id)">删除</el-button>
              <el-button type="text" @click="typeJudgment(2, val)">修改</el-button>
            </div>
          </div>
          <div class="text-left">
            <strong style="margin-right: 5px">标记:</strong><el-button size="mini" type="primary">{{val.a_tag}}</el-button>
            <strong style="margin-left: 20px">地址：</strong>{{val.a_address}}
          </div>
        </el-collapse-item>
        <el-collapse-item :name="val.a_id" v-for="val in address_Info" :key="val.a_id" v-if="val.a_state===1">
          <template slot="title">
            其他地址[{{val.a_tag}}]
          </template>
          <div class="flex-layout justify-start align-center">
            <div class="width-per-40 text-left"><strong>联系人：</strong>{{val.a_user}}</div>
            <div class="width-per-40 text-left"><strong>联系电话：</strong>{{val.a_phone}}</div>
            <div class="border-box pad-10 text-right width-per-20">
              <el-button type="text" @click="typeJudgment(1, val.a_id)">删除</el-button>
              <el-button type="text" @click="typeJudgment(2, val)">修改</el-button>
            </div>
          </div>
          <div class="text-left">
            <strong style="margin-right: 5px">标记:</strong><el-button size="mini" type="success">{{val.a_tag}}</el-button>
            <strong style="margin-left: 20px">地址：</strong>{{val.a_address}}
          </div>
        </el-collapse-item>

<!--        <el-collapse-item title="反馈 Feedback" :name="2">-->
<!--          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>-->
<!--          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="效率 Efficiency" :name="3">-->
<!--          <div>简化流程：设计简洁直观的操作流程；</div>-->
<!--          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>-->
<!--          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="可控 Controllability" :name="4">-->
<!--          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>-->
<!--          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="可控 Controllability" :name="5">-->
<!--          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>-->
<!--          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="可控 Controllability" :name="6">-->
<!--          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>-->
<!--          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
<!--        </el-collapse-item>-->
      </el-collapse>
    </div>
    <div class="address_btn_group">
      <div style="width: 100px">
        <el-link icon="el-icon-plus" @click="typeJudgment(3,null)">添加</el-link>
        <el-link @click="typeJudgment(4,null)">折叠<i class="el-icon-caret-top"></i> </el-link>
      </div>
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="ltr"
      :with-header="false" style="z-index: 9000">
      <div style="width: 100%;height: 100%;box-sizing: border-box;padding: 20px">
        <h1 style="margin-bottom: 30px">修改地址信息</h1>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="用户名称">
            <el-input v-model="formLabelAlign.a_user"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formLabelAlign.a_phone"></el-input>
          </el-form-item>
          <el-form-item label="地址标签">
            <el-input v-model="formLabelAlign.a_tag"></el-input>
          </el-form-item>
          <el-form-item label="收件地址">
            <el-input v-model="formLabelAlign.a_address"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" >
            <el-select v-model="formLabelAlign.a_state" placeholder="请选择是否默认" style="width: 100%">
              <el-option label="默认" value="0"></el-option>
              <el-option label="非默认" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="updateBtn" v-if="flog===0">点击修改</el-button>
          <el-button type="primary" @click="addInfoBtn" v-if="flog===1">确定添加</el-button>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'Address',
  data () {
    return {
      address_title: '地址管理',
      activeNames: ['1'],
      activeIndex: '1',
      activeIndex2: '1',
      address_Info: [], // 存放地址
      drawer: false,
      labelPosition: 'left',
      formLabelAlign: {
        a_user: '',
        a_phone: '',
        a_tag: '',
        a_address: '',
        a_state: '',
        a_create_time: '',
        a_id: ''
      },
      flog: null
    }
  },
  methods: {
    // 折叠面板
    handleChange (val) {
      console.log(val)
    },
    // 下拉菜单
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 类别判断 如何为1输出删除，如果为2输出为修改
    typeJudgment (number, obj) {
      if (number === 1) {
        console.log('地址组件==>删除', obj)
        this.del(obj)
      } else if (number === 2) {
        console.log('地址组件==>修改', obj)
        this.drawer = true
        this.flog = 0
        this.updateInfo(obj)
      } else if (number === 3) {
        console.log('地址组件==>添加信息')
        this.drawer = true
        this.flog = 1
        this.addInfo()
      } else {
        console.log('地址组件==>收起列表')
        this.activeNames = ['1']
      }
    },
    // 获取地址信息
    getAddress () {
      this.$axios.get('/address/select').then(response => {
        console.log(response)
        this.address_Info = response.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除地址信息
    del (obj) {
      this.$confirm('是否删除选中的信息？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.$axios.get('/address/del', {
          params: {
            a_id: obj
          }
        }).then(response => {
          console.log(response)
          this.$message({
            type: 'success',
            message: response.data.message
          })
          this.getAddress()
        }).catch(err => {
          console.log(err)
        })
      })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除信息'
          })
        })
    },
    // 修改地址信息
    updateInfo (obj) {
      this.formLabelAlign.a_user = obj.a_user
      this.formLabelAlign.a_phone = obj.a_phone
      this.formLabelAlign.a_tag = obj.a_tag
      this.formLabelAlign.a_address = obj.a_address
      this.formLabelAlign.a_state = obj.a_state + ''
      this.formLabelAlign.a_create_time = obj.a_create_time
      this.formLabelAlign.a_id = obj.a_id
    },
    // 修改信息按钮
    updateBtn () {
      this.$axios.get('/address/update', {
        params: {
          a_address: this.formLabelAlign.a_address,
          a_create_time: this.formLabelAlign.a_create_time,
          a_id: this.formLabelAlign.a_id,
          a_phone: this.formLabelAlign.a_phone,
          a_state: this.formLabelAlign.a_state,
          a_tag: this.formLabelAlign.a_tag,
          a_user: this.formLabelAlign.a_user
        }
      }).then(response => {
        if (response.data.message === '修改成功') {
          this.drawer = false
          this.$message({
            message: response.data.message,
            type: 'success'
          })
        }
        this.getAddress()
      }).catch(err => {
        console.log(err)
      })
    },
    // 添加信息
    addInfo () {
      this.formLabelAlign.a_user = ''
      this.formLabelAlign.a_phone = ''
      this.formLabelAlign.a_tag = ''
      this.formLabelAlign.a_address = ''
      this.formLabelAlign.a_state = ''
      this.formLabelAlign.a_create_time = ''
      this.formLabelAlign.a_id = ''
    },
    // 添加信息按钮
    addInfoBtn () {
      this.$axios.get('/address/insert', {
        params: {
          a_address: this.formLabelAlign.a_address,
          a_create_time: this.formLabelAlign.a_create_time,
          a_id: null,
          a_phone: this.formLabelAlign.a_phone,
          a_state: this.formLabelAlign.a_state,
          a_tag: this.formLabelAlign.a_tag,
          a_user: this.formLabelAlign.a_user
        }
      }).then(response => {
        // console.log(response)
        if (response.data.message === '添加成功') {
          this.drawer = false
          this.$message({
            message: response.data.message,
            type: 'success'
          })
        }
        this.getAddress()
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getAddress()
  }
}
</script>

<style lang="less" scoped>
#address{
  width: 100%;
  position: relative;
  .address_box{
    width: 100%;
    height: 480px;
    overflow:auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .address_btn_group{
    width: 100px;
    height: 100px;
    z-index: 3000;
    position: absolute;
    right: -10px;
    top: -20px;
    /*background: red;*/
  }
}
.element::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

/* 下拉菜单样式 */
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  /*margin-bottom: 20px;*/
}
</style>
